<template>
	<view class="suspend">
		<view class="suspend_title">
			<view class="title">
				暂停记录
			</view>
			<view class="opera-btn" @click="suspension" v-if="roles=='technician'">
				<view class="btn">
					暂停申请
				</view>
			</view>
		</view>

		<view class="content">
			<view class="item" v-for="item in list">
				<view class="">
					申请暂停时间：{{item.beginTime}}~{{item.endTime}}
				</view>
				<view class="">
					发起时间：{{item.createTime}}
				</view>
				<view class="">
					审批结果：
					<text :style="{color:status[item.state].color}">
						{{status[item.state].title}}
					</text>
				</view>
				<view class="">
					审批人：{{item.auditorUserName}}
				</view>
				<view class="btnContent flex align-center" v-if="item.state=='0'&&roles=='store'">
					<view class="btn1" @click="getrefuse(item)">
						拒绝
					</view>
					<view class="btn2" @click="getsure(item)">
						通过
					</view>
				</view>
				<view class="operate" v-else-if="getEndTime(item.endTime)">
					<view class="btn2" @click="pauseEdit(item)">
						修改
					</view>
					<view class="btn1" @click="pauseDel(item)">
						取消
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;">

		</view>
		<you-popup :popupVisible="shopVisible" :popupTitle="popupTitle == 1? '暂停':popupTitle == 3? '修改暂停时间':'暂停申请提交失败'"
			@popupClose="shopVisible = false" bgColor="#fff" dialogWidth="700rpx" dialogHeight="auto">
			<view slot="popupContent">
				<!-- 标题 -->
				<view class="popup-contain" v-if="popupTitle == 1||popupTitle == 3">
					<view class="timeList">
						<view class="timeListi" :class="clickItem==index ? 'active':'default'"
							v-for="(item,index) in timeList" @click="chooseItem(item,index)">{{item}}分钟</view>
					</view>
					<view class="flex">
						<view class="title1">选择暂停时间</view>
						<view class="popupTime">
							<view class="begin" @click="show=true">
								{{begintime}}
							</view>
							<view class="end" @click="showend=true">
								{{endtime}}
							</view>
						</view>
					</view>
					<view class="btnpms" @click="sureparus" style="">
						提交
					</view>
				</view>
			</view>
		</you-popup>
		<u-datetime-picker :show="show" v-model="value1" mode="datetime" @confirm='confirm' @cancel='close'
			:minDate="Date.now()"></u-datetime-picker>
		<u-datetime-picker :show="showend" v-model="value2" mode="datetime" @confirm='confirm2' @cancel='close2'
			:minDate="Date.now()"></u-datetime-picker>

		<u-popup :show="showall" mode="center" :round="10">
			<view class="popup">
				<view class="title">{{right}}审批</view>
				<view class="item">确定给{{name}},{{right}}暂停审批吗？</view>
				<view class="button">
					<view class="sure" @click="madesure">
						确定
					</view>
					<view class="contel" @click="madeconcel">
						取消
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getPauseAapList,
		addpause,
		getaapManagerList,
		upatepause,
		editPause,
		delPause
	} from '@/api/system/work'
	import YouPopup from "@/components/you-popup/index.vue"
	import PickerForm from '@/components/pickerForm/index.vue'
	export default {
		components: {
			YouPopup,
			PickerForm
		},
		props: {
			storeId: Number, // 声明message属性
		},
		data() {

			return {
				id: '',
				name: '',
				show: false,
				showall: false,
				showend: false,
				right: '',
				roles: '',
				name: '',
				userId: '',
				value1: Number(new Date()),
				value2: Number(new Date()),
				begintime: Date.now(),
				endtime: '',
				popupTitle: 1,
				clickItem: 0,
				shopVisible: false,
				item: {
					type: 'picker',
					label: '工作时间',
					key: 'workBeginTime',
					Time: true,
					isRange: true,
					isSecond: true,
				},
				timeList: [20, 40, 60, 100],
				list: [],
				status: {
					'0': {
						title: '未审核',
						color: '#F98316'
					},
					'1': {
						title: '通过',
						color: '#01B961'
					},
					'2': {
						title: '拒绝',
						color: '#FE1313 '
					},
				},
				pickerForm: {},
				ruleForm: {},
				editItem: {}
			}
		},
		created() {
			this.getPauseAapList()
			const userId = uni.getStorageSync('userId');
			this.userId = userId
			const roles = uni.getStorageSync('role');
			this.roles = roles
			this.chooseItem(20, 0)
		},
		mounted() {
			this.getPauseAapList()
			const userId = uni.getStorageSync('userId');
			this.userId = userId
			const roles = uni.getStorageSync('role');
			this.roles = roles
		},
		methods: {
			getEndTime(endTime) {
				const currentTime = new Date().getTime();
				const knownTimeStamp = new Date(endTime).getTime();
				if (currentTime > knownTimeStamp) {
					console.log('当前时间大于已知时间，返回 false');
					return false;
				} else {
					console.log('当前时间小于或等于已知时间，返回 true');
					return true;
				}
			},
			getPauseAapList() {
				if (this.roles === 'technician') {
					getPauseAapList({
						storeId: this.storeId
					}).then(res => {
						this.list = res.rows
					})
				} else if (this.roles === 'store') {
					getaapManagerList({
						storeId: this.storeId
					}).then(res => {
						this.list = res.rows
					})
				}
			},
			getrefuse(item) {
				this.showall = true
				this.id = item.id
				this.name = item.userName
				this.right = '拒绝'
			},
			getsure(item) {
				this.showall = true
				this.id = item.id
				this.name = item.userName
				this.right = '通过'
			},
			madesure() {
				upatepause({
					id: this.id,
					state: 1
				}).then(res => {
					if (res.code == 200) {
						this.getPauseAapList()
						this.showall = false
						this.chooseItem(20, 0)
					}
				})
			},
			madeconcel() {
				upatepause({
					id: this.id,
					state: 2
				}).then(res => {
					if (res.code == 200) {
						this.getPauseAapList()
						this.showall = false
					}
				})
			},

			sureparus() {
				const data = uni.getStorageSync('technician');
				if (this.begintime && this.endtime) {
					if (this.popupTitle == 1) {
						addpause({
							userId: data.userId,
							userName: data.name,
							beginTime: this.begintime,
							endTime: this.endtime,
							phoneNumber: data.phoneNumber,
							regionId: data.belongAreaId,
							regionName: data.belongAreaName,
							storeId: data.belongStoreId,
							storeName: data.belongStoreName,
						}).then(res => {
							if (res.code == 200) {
								// this.$modal.loading("上传成功")
								this.shopVisible = false;
								this.getPauseAapList()
								this.chooseItem(20, 0)
							}
						})
					} else {
						const data = uni.getStorageSync('technician');
						this.editItem.beginTime = this.begintime,
							this.editItem.endTime = this.endtime,
							editPause(this.editItem).then(res => {
								uni.showToast({
									title: '修改成功！',
									icon: 'none'
								})
								this.shopVisible = false;
								this.begintime = null
								this.endtime = null
								this.getPauseAapList()
							})
					}

				} else {
					this.$modal.msgError("请选取时间")
				}

			},
			confirm(value) {
				this.value1 = value.value
				const timestamp = this.value1;
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				if (formattedDateTime) {
					this.begintime = formattedDateTime
				}
				this.show = false

			},
			close() {
				this.show = false
			},
			close2() {
				this.showend = false
			},
			confirm2(value) {
				this.value2 = value.value
				const timestamp = this.value2;
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				this.endtime = formattedDateTime
				this.showend = false
			},
			suspension() {
				this.shopVisible = true;
				this.popupTitle = 1
			},
			setPickerForm(pickerForm) {
				this.pickerForm = pickerForm
			},
			formattedDate(value) {
				const now = new Date(value);
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0');
				const day = now.getDate().toString().padStart(2, '0');
				var hourss = now.getHours().toString().padStart(2, '0') // 补零
				var minutess = now.getMinutes().toString().padStart(2, '0') // 补零
				var secondss = now.getSeconds().toString().padStart(2, '0') // 补零

				return `${year}-${month}-${day} ${hourss}:${minutess}:${secondss}`;
			},
			//选择暂停时间方法
			chooseItem(item, i) {
				this.clickItem = i
				this.begintime = this.formattedDate(Date.now())
				this.endtime = this.formattedDate((Date.now()) + item * 60 * 1000)
				this.value1 = Date.now()
				this.value2 = (Date.now()) + item * 60 * 1000
			},
			//修改暂停时间
			pauseEdit(item) {
				console.log(item, 'pause');
				this.editItem = item
				this.popupTitle = 3
				this.begintime = item.beginTime
				this.endtime = item.endTime
				this.shopVisible = true
			},
			pauseDel(item) {
				delPause(item.id).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '取消成功！',
							icon: 'none'
						})
						this.getPauseAapList()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 600rpx;
		height: 400rpx;

		.title {
			font-weight: bold;
			color: #333333;
			width: 600rpx;
			text-align: center;
		}

		.item {
			font-weight: 400;
			font-size: 38rpx;
			width: 600rpx;
			color: #333333;
			margin: 20rpx 0;
			text-align: center;
		}

		.button {
			display: flex;
			justify-content: space-around;
			margin-top: 100rpx;

			.sure {
				width: 162rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				background-color: #C27E15;
				color: #fff;
				border-radius: 32rpx;
				font-size: 33rpx;
			}

			.contel {
				width: 162rpx;
				height: 68rpx;
				color: #C27E15;
				border-radius: 32rpx;
				text-align: center;
				line-height: 68rpx;
				font-size: 33rpx;
				background-color: #F5F4F4;
			}
		}
	}

	.suspend {
		.suspend_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			.title {
				font-size: 50rpx;
				font-weight: 500;
				color: #000000;
				line-height: 59rpx;
				margin: 43rpx 0;

			}

			.opera-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 200rpx;

				.view-time,
				.btn {
					width: 100%;
					height: 75rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2rpx solid #c27e15;
					border-radius: 50rpx;
					font-size: 30rpx;
					color: #c27e15;
				}

				.btn {
					color: #FFF;
					background-color: #c27e15;
				}
			}
		}

		.content {
			.item {
				background-color: #ffffff;
				padding: 28rpx 43rpx;
				margin-bottom: 24rpx;
				border-radius: 15rpx;

				>view {
					font-size: 42rpx;
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					color: #333333;
					line-height: 60rpx;
				}
			}
		}
	}

	.btnContent {
		height: 130rpx;
		line-height: 130rpx;
		border-top: 1rpx solid #e6e6e6;

		.btn1 {
			width: 175rpx;
			height: 82rpx;
			font-size: 42rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			text-align: center;
			line-height: 74rpx;
			border-radius: 45rpx;
			text-align: center;
			border: 1px solid #FE1313;
			color: #FE1313;
			margin-left: 200rpx;
		}

		.btn2 {
			width: 175rpx;
			height: 82rpx;
			text-align: center;
			line-height: 74rpx;
			font-size: 42rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			border-radius: 45rpx;
			text-align: center;
			border: 1px solid #01B960;
			color: #01B960;
			margin-left: 20rpx;
		}
	}

	.operate {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-top: 1rpx solid #e6e6e6;
		font-size: 28rpx !important;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 10rpx;
		padding-top: 10rpx;

		.btn2 {
			background-color: #c27e15;
			color: #fff;
			border-radius: 25px;
			width: 45%;
			text-align: center;
		}

		.btn1 {
			background-color: #fff;
			border: 1rpx solid #c27e15;
			color: #c27e15;
			border-radius: 25px;
			width: 45%;
			text-align: center;
		}
	}

	.popup-contain {
		.timeList {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.timeListi {
				border-radius: 10rpx;
				border: 1px solid #c27e15;
				padding: 10rpx 16rpx;
			}

			.active {
				color: #fff;
				background-color: #C27E15;
			}

			.default {
				color: #C27E15;
			}
		}

		.title1 {
			font-size: 30rpx;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 600;
			color: #5d5d5d;
			// line-height: 42rpx;
		}

		.timeItem {
			margin: 10rpx 0;
			width: 147rpx;
			height: 1rpx;
			border-radius: 13rpx 13rpx 13rpx 13rpx;
			opacity: 1;
			border: 1rpx solid #C27E15;
			color: #c27e15;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.active {
			background: #C27E15;
			color: #fff;
		}
	}

	.popup-containText {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 45rpx;
		text-align: left;
		display: flex;
	}

	.btn {
		background-color: #C27E15;
		color: #fff;
		width: 671rpx;
		height: 94rpx;
		font-size: 38rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		line-height: 45rpx;
	}

	.btnpms {
		width: 80%;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		opacity: 1;
		background-color: #C27E15;
		text-align: center;
		line-height: 80rpx;
		// margin-top: 24rpx;
		margin: 24rpx auto;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.popupTime {
		// background-color: #C27E15;
		margin-left: 24rpx;

		// line-height: 36rpx;
		.begin {
			width: 354rpx;
			height: 64rpx;
			border-radius: 14rpx;
			opacity: 1;
			border: 1rpx solid #777777;
			color: #666666;
			text-align: center;
			line-height: 64rpx;
			margin-bottom: 18rpx;
		}

		.end {
			width: 354rpx;
			height: 64rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
			border: 1rpx solid #777777;
			color: #666666;
			text-align: center;
			line-height: 64rpx;
		}
	}
</style>